<template>
	<!-- 背景图片 -->
	<view class="bkimg">
		<img style="width: 100%;height: 100%;" src="@/static/添加车辆.png" alt="" />
	</view>
	
	<!-- 添加类型 -->
	<view class="info">
		<view class="type">
			<view class="position">车辆类型:</view>
			      <uni-data-select
			        v-model="type_value"
			        :localdata="type_data"
			        @change="type_change"
					style="width: 70%;"
			      ></uni-data-select>
		</view>
		<!-- 添加型号 -->
		<view class="type">
			<view class="position">车辆型号:</view>
			<uni-data-select
			  v-model="version_value"
			  :localdata="version_data"
			  @change="version_change"
			  style="width: 70%;"
			></uni-data-select>
		</view>
		<!-- 输入车牌号码 -->
		<view class="type">
			<view class="position">车牌号码:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</view>
			<uni-easyinput v-model="car_number" placeholder="请输入您的车牌号"></uni-easyinput>
		</view>
		<!-- 姓名 -->
		<view class="type">
			<view class="position">车主姓名:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</view>
			<uni-easyinput v-model="admin_name" placeholder="请输入您的姓名"></uni-easyinput>
		</view>
		<!-- 手机号 -->
		<view class="type">
			<view class="position">电话号:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</view>
			<uni-easyinput v-model="admin_tel" placeholder="请输入您的手机号"></uni-easyinput>
		</view>
		<view class="type">
			<view class="position">照片:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</view>

				<uni-file-picker
					v-model="imageValue" 
					fileMediatype="image" 
					mode="grid" 
					@select="select" 
					@progress="progress" 
					@success="success" 
					@fail="fail" 
				>
				</uni-file-picker>
		</view>
	</view>

	<!-- 添加按钮 -->
	<button type="primary" style="margin-top: 20vh; width: 60vw;height: 6vh;background-color:#1E90FF">添加</button>
</template>

<script setup>
import { ref } from 'vue';

// 车辆类型
	let type_value= ref(0)
	const type_data=[
		{value:0,text:"请选择"},
		{value:1,text:"小客车"},
		{value:2,text:"其他客车"},
		{value:3,text:"微型客车"},
		{value:4,text:"轻型货车"},
		{value:5,text:"中型货车"},
		{value:6,text:"重型货车"},
	]
	const type_change=(e)=>{
		console.log("开始打印数据:" + e)
	}
	
	
	// 车辆型号
	let version_value= ref(0)
	const version_data=[
		{value:0,text:"请选择"},
		{value:1,text:"大众"},
		{value:2,text:"奔驰"},
		{value:3,text:"宝马"},
		{value:4,text:"东风"}
	]
	const version_change=(e)=>{
		console.log("开始打印数据:" + e)
	}
	// 车牌号码
	let car_number=ref("");
	// 车主姓名
	let admin_name=ref("");
	//电话号
	let admin_tel=ref("");
	// 照片
</script>

<style lang="scss" scoped>
	.bkimg{
		width: 100vw;
		height: 25vh;
		padding: 5vh 25vw;
		// background-color: darkcyan;
	}
	
	.info{
		width: 80vw;
		height: 40vh;
		margin: 0 auto;
		// 字体位置
		.position{
			font-size: 14px;
			line-height: 35px;
		}
		
		//车辆类型
		.type{
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			margin: 1vh auto;
		}
		.admin_info{
			display: flex;
			flex-wrap: wrap;
			justify-content: space-around;
		}
	}
</style>